<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="format-detection" content="telephone=no" />
<title>购买卡</title>
<meta content="" name="keywords" />
<meta content="" name="description" />
<meta content="" name="copyright" />
<meta content="" name="author" />
<meta name="robots" content="noarchive">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="js/urlTool.js"></script>
<script type="text/javascript" src="js/mescroll.min.js"></script>
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/swiper.min.css" />
<link rel="stylesheet" href="css/mescroll.min.css">
</head>

<body>
<!--头部-->
<div class="return_top bgyellow">
    <a href="myCenter.html">
        <span class="login_home cfff">返回个人中心</span>
    </a>
</div>
<!--//头部结束-->
<!--主体区域-->
<div class="pb120" id="ordercreate">
    <!-- 购买页面开始 -->
    <div class="bgf4 c333 pt20 pb30">
        <div class="mybuy_card">
            <p class="mybuy_card_title cfff fz28 pl20">自驾车主卡</p>
            <div class="pt40 pb40 pl30 pr30 clear">
                <p class="fl mybuy_card_img"><img  src="temp/buyicon.jpg" /></p>
                <p class="fr fz32 mybuy_card_text pt30" id="orderNo"></p>
            </div>
        </div>
    </div>    
    <div class="bgfff pt20 pb20 pl20 pr20 c999 bb clear">
        <div class="fl">支付金额</div>
        <p class="fr cblue"><span id="orderPrice"></span>元</p>
    </div>
    
<div class="bgfff pt20 pb20 pl20 pr20 c999 bb clear">
    <p class="fz28 c999">选择支付类型</p>
    <div class="clear divImgIn pt10"> 
        <label class="fl mr20 deactivation_unchecked deactivation_select"><div><input type="radio" class="hide" name="card" value="webchat_api" checked="checked">微信支付</div></label>
        <label class="fl mr20 deactivation_unchecked"><div><input type="radio" class="hide" name="card" value="Ali_web">支付宝支付</div></label>
    </div>
</div>

    <div class="viewtickettypeadd_button">
        <button class="w100 car_cont_submit fz32 cfff" id="surepay">确认付款</button>
    </div>
    <!-- 购买页面结束 -->
</div> 

<!--底部-->
<div class="index-nav-footer w bt">
    <a href="index.html"><i class="home"></i>首页</a>
    <a href="ticketlist.html"><i class="shopCart"></i>门票</a>
    <a href="ordercar.html"><i class="order"></i>订单</a>
    <a href="javascript:;" class="select-two"><i class="myCenterclick"></i>我的</a>
</div>
<!--//底部-->
</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    var openid= getQueryVariable("openid");
    var _str='';
    var url = window.location.search;
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
        theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);
        }
        $("#orderNo").html(theRequest.orderNo);
        $("#orderPrice").html(((theRequest.orderPrice)*0.01).toFixed(2));
    }

    $(".divImgIn label").click(function() {
        $(this).siblings().removeClass('deactivation_select');// 删除其他兄弟元素的样式
        $(this).addClass('deactivation_select');// 添加当前元素的样式
    });

    $('#surepay').click(function(){
        var idType=$('input[name="card"]:checked').val(); 
        if(idType=='webchat_api'){
            weixinpay();
        }else{
            location.href="https://pay.12301.co/pay/topay?orderno="+theRequest.orderNo+"&payType=Ali_web"
        }
       
    })
if(openid){
        weixinpay();
    }else{
        openid=openid?openid:"";
    }

    function weixinpay(){
        var ua = navigator.userAgent.toLowerCase();
        if (ua.indexOf('micromessenger') != -1) {//微信内置浏览器
            $('#tradeType').val('JSAPI');
            $.ajax({
                type : "POST",
                url:'https://pay.12301.co/pay/topay',
                traditional: true,
                dataType: 'json',
                data:{orderno:theRequest.orderNo,
                    openid:openid,
                    pageurl:window.location.href,
                    payType:'webchat_api'},
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("Access-Control-Allow-Origin","*");
                },
                success:function(res){
                    if(res.code=='200'){
                        callback(res.data);
                    }else if(res.code=='505'){
                        window.location.href=res.data;
                    }
                    else{
                        alert(res.message);
                    }
                }
            })
        }else{//手机网页
            $.ajax({
                type : "POST",               
                url:'https://pay.12301.co/pay/topay?orderno='+theRequest.orderNo+'&payType=webchat_h5',
                traditional: true,
                dataType: 'json',
                data:$('#update').serialize(),
                success:function(res){
                    if(res.code=='200'){
                        var mweb_url=res.data.payInfo.mweb_url;
                        window.location.href=mweb_url;
                    }
                    else{
                        alert(res.message);
                    }
                }
            })
        }
    }

    function callback(result){
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: result.jsTicket.appId,
            timestamp: result.jsTicket.timestamp,
            nonceStr: result.jsTicket.nonceStr,
            signature: result.jsTicket.signature,
            jsApiList: ['checkJsApi',
                'chooseWXPay'
            ] // 必填，需要使用的JS接口列表
        });
        wx.ready(function(){
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            callpay(result.payInfo);
        });
    }

    function callpay(result){
        wx.chooseWXPay({
            timestamp: result.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: result.nonceStr, // 支付签名随机串，不长于 32 位
            package: result.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
            signType: result.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: result.paySign, // 支付签名
            success: function (r) {
                if (r.errMsg == "chooseWXPay:ok") {
                    self.location="ordercar.html";
                } else {
                    self.location="ordercar.html";
                }
            },
            cancel: function(r) {
                self.location="ordercar.html";
            },
            fail:function(r){
                self.location="ordercar.html";
            }
        });
    }
</script>
</html>
